<template>
  <el-dialog :close-on-click-modal="false" :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="经办人：" prop="reporter">
        <SelectByApi v-model="form.reporter" :label.sync="form.reporterName" :api="memberList" :params="{pageSize: 999}" @change="onChangeUser"></SelectByApi>
      </el-form-item>
      <el-form-item label="车牌号码：" prop="carCode">
        <el-select v-model="form.carCode" placeholder="请选择车牌号码" style="width: 100%;" @change="onChangeCarCode">
          <el-option  v-for="(item,index) in carOptions"  :key="index"  :label="item.code" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆类型：" prop="type">
        <el-input  v-model="form.carTypeName" type="text" disabled placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="加油时间：" prop="gmtHappen">
        <el-date-picker  v-model="form.gmtHappen"  type="datetime" value-format="yyyy-MM-dd HH:mm:ss"  placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="当前公里数：" prop="mileage">
        <el-input  v-model="form.mileage" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="单价：" prop="price">
        <el-input v-model="form.price" type="text" placeholder="请输入">
            <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="加油量：" prop="amount">
        <el-input v-model="form.amount" type="text" placeholder="请输入">
            <template slot="append">升</template>
        </el-input>
      </el-form-item>
      <el-form-item label="金额：" prop="totalFee">
        <el-input v-model="form.totalFee" type="text" placeholder="请输入">
            <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="图片：">
        <ImageUpload v-model="form.pics" :limit="3"></ImageUpload>
      </el-form-item>
      <el-form-item label="备注：">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入" :autosize="{ minRows: 4, maxRows: 6 }" maxlength="200" show-word-limit></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {update, add} from '@/api/carRecord';
import { memberList } from "@/api/user";
import * as carApi from '@/api/car'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default:null
    },
    teamOptions: {
      type: Array,
      default: []
    }
  },
  watch: {
    show: {
      handler(nv) {
        if(nv) {
          this.getCarNumber()
          this.form = {type: 1, typeName: '油费'}
          if(this.item && this.item.id) {            
            this.form = Object.assign({}, this.item)
            this.form.userId = Number(this.item.userId)
          }
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      carOptions: [],
      form: {},
      rules: {
        userId: {required: true, message: '请选择驾驶员', trigger: 'change'},
        fleetName: {required: true, message: '请选择车队', trigger: 'change'},
        carNo: {required: true, message: '请输入车牌号', trigger: 'blur'},
        reportTime: {required: true, message: '请选择加油时间', trigger: 'change'},
        currentKilometers: {required: true, message: '请输入当前公里数', trigger: 'blur'},
        oilPrice: {required: true, message: '请输入单价', trigger: 'blur'},
        refuelingQuantity: {required: true, message: '请输入加油量', trigger: 'blur'},
        // price: {required: true, message: '请输入金额', trigger: 'blur'},
      },
    }
  },
  methods: {
    memberList,
    async getCarNumber() {
      try {
        const res = await carApi.getList()
        this.carOptions = res.data;
      } catch (error) {

      }
    },
    submit() {
      try {
        this.$refs['form'].validate(async valid => {
          if(valid) {
            const res = this.form.id ? await update(this.form): await add(this.form);
            if(res.code == 1) {
              this.$message.success('操作成功！')
              this.$emit("confirm")
              this.close()
            }else{
              this.$message.error(res.msg)
            }
          }
        })
      } catch (error) {

      }
    },
    onChangeUser(e) {

    },
    onChangeCarCode(e) {
        console.log(e)
        const item = this.carOptions.find(c => c.code == e);
        this.$set(this.form, 'carTypeName', item.typeName)
        this.$set(this.form, 'carType', item.type)
        this.$set(this.form, 'groupId', item.groupId)
        this.$set(this.form, 'groupName', item.groupName)
        this.$set(this.form, 'groupPath', item.groupPath)
    },
    close() {
      this.$refs['form'].resetFields();
      this.$emit("update:show", false)
    }
  }
}
</script>
